﻿<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%String path = request.getContextPath(); %> 
<!DOCTYPE html>
<html>
<head>
<title>课程详情</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<link href="<%=path%>/resources/css/pages/style.css" rel="stylesheet" type="text/css" />
<link href="<%=path%>/resources/css/pages/xcConfirm.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=path%>/resources/script/js/jquery-1.8.0.min.js" ></script>
<script  type="text/javascript" src="<%=path%>/resources/script/js/vue.js"></script>
<script type="text/javascript" src="<%=path%>/resources/script/js/js.js" ></script>
<script type="text/javascript" src="<%=path%>/resources/script/js/xcConfirm.js" ></script>
</head>
<body>
<div id="contentBody">
<div class="top">
  <div class="top-ct">
    <h3 class="logo"></h3> 
   <span id='span'>
       <a href="<%=path%>/pages/login" id='plogin'><span >您好，请登录！</span></a>
       <a href="<%=path%>/pages/userInfo?userid=${loginUser.id}" id='pshow'><span>${loginUser.nickName}（${loginUser.account }）</span></a>
    </span>
    <p><a href="<%=path%>/index">首页</a><a href="<%=path%>/pages/mycourse?userid=${loginUser.id}"  class="select">
	我的课程</a><a href="<%=path%>/pages/learnhistory?userid=${loginUser.id}">学习历史</a><a href="javascript:void(0);">我的技能</a>
</p> 
    </div>
</div>

<div id="main">
<div class="ny-ban"><img src="<%=path%>/resources/images/pages/images/ny-ban.jpg"></div>
<div class="position">
 <p><a href="<%=path%>/pages/mycourse?userid=" class="syx">首页</a> ><a class="syx" href="<%=path%>/pages/mycourse?userid=${loginUser.id}">
 我的课程</a> > <a href="javascript:void(0)">{{CourseDetail.subjectName}}</a></p>
 <form>
  <label><input type="text" placeholder="搜索" class="ssbt"></label>
  <label><input type="submit" class="ssan" value="" disabled="true"></label>
 
 </form>
</div>

<div class="course_article">
  <dl>
    <dt><a href="javascript:void(0)"><img v-bind:src="CourseDetail.filePath" onerror="javascript:this.src='<%=path%>/resources/images/pages/images/default.png'"></a></dt>
    <dd>
       <h3><a href="javascript:void(0)">【{{CourseDetail.subjectName}}】</a></h3>
       <span><a href="javascript:void(0);">任课老师：{{CourseDetail.teacher}}</a></span>
       <p><a href="javascript:void(0);" class="subjectRemark">课程简介：{{{CourseDetail.subjectRemark}}}</a></p>
   		<div class="probar" style="float:left;width:50%">
       	<div class="proleft" :style='"width: "+CourseDetail.percent+"%";'></div>
       	<div class="spandot"></div>
       	<div class="proright" :style='"width: "+(100-CourseDetail.percent)+"%";'></div>
        </div>
     	<div class="provalue" style="float:left;font-size:14px;text-align:left;margin-left:20px">{{CourseDetail.percent}}%</div>
    </dd>  
  </dl>
</div>
<div class="clear"></div>
<div class="course_zhangjie"  v-if="CourseChapters.length>0">
	<div v-for="pitem in CourseChapters" style="min-height:150px;height:auto">
	     <h5>{{pitem.name}}</h5>
		 <div class="jie">
		     <a v-for="sitem in pitem.chapter" href="javascript:gotoVideo({{CourseDetail.id}},{{sitem.id}})" class="pass current">{{sitem.name}}</a>            
		 </div>
	</div>
</div>
<div class="course_zhangjie" style="min-height:150px;height:auto;padding-top:30px;text-align:center;color:#777;font-size:18px" v-else>
    该课程暂无章节信息！
</div>

<div class="clear"></div>
</div>
<div class="foot">
<div class="foot-top"></div>
<div class="foot-ct"><p>Copyright © 2016 业主单位：福建工程学院，建设单位：福州森泽信息科技有限公司 技术服务热线：87862229
   <a href="#"><img src="<%=path%>/resources/images/pages/images/cnzz.jpg"></a></p></div>
</div>
</div>
<script  type="text/javascript"  language="JavaScript">
	var urlStr=location.search;
	var userInfo='${loginUser.id}';
	var urlPara=[];
	var parObj=new Object();
	$(document).ready(function() {
		if(urlStr.indexOf("?")!=-1)
		{
			urlPara=urlStr.substr(urlStr.indexOf("?")+1).split("&");
		}
		for(var i=0;i<urlPara.length;i++)
		{
			parObj[urlPara[i].split("=")[0].toString()]=urlPara[i].split("=")[1].toString();
		}
	});
    $(function(){
	 var vmMain=new Vue({
    	el:'#contentBody',
    	data:{
    		CourseDetail:{},
    		CourseChapters:[]
    	},
    });
	 
	 if(userInfo=="")
	  {
		  window.wxc.xcConfirm("未登录或登录失效，请重新登陆!", window.wxc.xcConfirm.typeEnum.info,{
				onOk:function(){
					location.href="<%=path%>/pages/login";
				}
			});
		  return false;
	  }
	 else
	 {
		 $.ajax({
		   		url:"findchaptersection",
		   		type:"POST",
		   		dataType:"json",
		   	    data:{id:parObj["id"],userid:parObj["userid"]},
		   		success:function(result)
		   		{	
		   			if(result&&result.length>0)
		   			{
		   				vmMain.CourseDetail=result[0];
		   				vmMain.CourseDetail.filePath="\\atta\\"+vmMain.CourseDetail.filePath;
		   				vmMain.CourseDetail.id=parObj["id"];
		   				for(var i=1;i<result.length;i++)
		 				{
		 					vmMain.CourseChapters.push(result[i]);
		 				}
		   			} 
		   		},
		   		error:function(result){
		   		    return;
		   		}
		   	  });
	 }
 });
    
  var gotoVideo=function(id,sectionId)
  {
	  if(userInfo=="")
	  {
		  window.wxc.xcConfirm("未登录或登录失效，请重新登陆!", window.wxc.xcConfirm.typeEnum.info,{
				onOk:function(){
					location.href="<%=path%>/pages/login";
				}
			});
		  return false;
	  }
	  else
	  {
		  $.ajax({
		        type: "post",
		        url: "findResource",
		        async: false,
		        dataType: "json",
		        data: { sectionId: sectionId },
		        success: function (result) {
		        	if(result&&result.length>0&&result[0].filePath)
		        	{
		        		location.href="<%=path%>/pages/onlinecourse?id="+id+"&sectionId="+sectionId;
		        	}
		        	else
	        		{
		        		alert("该章节暂无视频资源!");
	        		}
		        },
		        error: function () {
		            alert("data request errror!");
		            return;
		        }
		  });
	  }
	  
  };
</script>
<script type="text/javascript"  language="JavaScript">
$(function(){
	var myName='${loginUser.account}';
	if(myName==""||myName==undefined)
	{
		document.getElementById('plogin').setAttribute("style", "display:inline");
		document.getElementById('pshow').setAttribute("style", "display:none");
	}
	else{
		document.getElementById('plogin').setAttribute("style", "display:none");
		document.getElementById('pshow').setAttribute("style", "display:inline");
	}
});
</script>
</body>
</html>
